<template>
	<z-paging
		ref="paging"
		:refresher-out-rate="0.8"
		:show-empty-view-reload-when-error="false"
		:empty-view-img-style="{ width: '308rpx', height: '308rpx' }"
		empty-view-error-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/1c53b8aed0c74201bb092265803a1d48.png"
		empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
		empty-view-error-text="暂无数据"
		safe-area-inset-bottom
		bg-color="#FFF"
		v-model="dataList"
		@query="queryList"
	>
		<view class="receive">
			<view class="receives">
				<view class="receives_search">
					<view @click="Scanning_code">
						<u-icon
							name="scan"
							color="#333"
							size="32"
						></u-icon>
					</view>
					<view
						style="width: 598rpx; background-color: #fff"
						@click="toSearchList"
					>
						<u-search
							placeholder="请输入搜索标题"
							v-model="keyword"
							:showAction="false"
							bgColor="#E1E1E1"
							color="#999999"
							placeholderColor="#999"
							clearabled
							disabled
						/>
					</view>
				</view>
				<!-- 结果详情数据 -->
				<view
					class="receive_info"
					v-for="(item, index) in dataList"
					:key="index"
					@click="to_detail(item.receiveId)"
				>
					<view class="info_time">
						<!-- <text class="info_time_t">{{item.createTime}}</text> -->
						<u--text
							v-if="item.createTime != '' && item.createTime != null"
							:text="`${item.createTime.split(' ')[0]}`"
							size="32rpx"
							bold
							color="#333"
						/>
						<view class="info_time_i">
							<u--text
								text="待使用"
								color="#2979ff"
								bold
								size="28rpx"
								align="right"
								v-if="item.status === '1'"
							/>
							<u--text
								text="未回寄"
								color="#2979ff"
								bold
								size="28rpx"
								align="right"
								v-if="item.status === '2'"
							/>
							<u--text
								text="已完成"
								color="#2979ff"
								bold
								size="28rpx"
								align="right"
								v-if="item.status === '9'"
							/>
							<u--text
								text="待发货"
								color="#2979ff"
								bold
								size="28rpx"
								align="right"
								v-if="item.status === '4'"
							/>
							<u--text
								text="待收货"
								color="#2979ff"
								bold
								size="28rpx"
								align="right"
								v-if="item.status === '3'"
							/>
							<u--text
								text="等待检测"
								color="#2979ff"
								bold
								size="28rpx"
								align="right"
								v-if="item.status === '5'"
							/>
							<u-icon
								name="arrow-right"
								color="#2979ff"
								size="14"
								top="2rpx"
								bold
							/>
						</view>
					</view>
					<view class="receive_detail">
						<image
							class="detail_img"
							:src="item.thumbnail"
							mode=""
						></image>
						<view>
							<text class="detail_t">{{ item.goodsName }}</text>
							<view class="detail_tt">
								<text :style="item.skuSimpleSpecs ? 'color: #333' : 'color: #999'">{{ item.skuSimpleSpecs || "无规格" }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import { receiveList } from "@/api/receive"
	import { mapGetters } from "vuex"
	export default {
		data() {
			return {
				dataList: [1, 2, 3, 4, 5],
				refresherStatus: 0
			}
		},
		computed: {
			...mapGetters(["isLogin", "phone"])
		},
		methods: {
			Scanning_code() {
				if (this.isLogin) {
					if (!this.phone) {
						this.$store.commit("SET_SHOW_PHONE_NUMBER", true)
						return
					}
					let tenantId = this.$store.getters.userInfo.tenantId
					uni.scanCode({
						onlyFromCamera: false,
						// scanType: ['qrCode'],
						success(res) {
							let orderNum = res.path
							let qrCodeInfo = orderNum.lastIndexOf("=")
							orderNum = orderNum.substring(qrCodeInfo + 1, orderNum.length)
							uni.$u.route({
								url: "/pages_receive/receive_detail/index",
								params: {
									scene: orderNum
								}
							})
						}
					})
				} else {
					uni.navigateTo({
						url: "/pages/user/phone/indexApp"
					})
				}
			},
			queryList(pageNo, pageSize) {
				const that = this
				const params = {
					pageNum: pageNo,
					pageSize: pageSize
				}
				receiveList(params)
					.then((result) => {
						that.$refs.paging.completeByTotal(result.data.rows)
					})
					.catch((e) => {
						that.$refs.paging.complete(false)
					})
			},
			to_detail(receiveId) {
				//领取记录页面
				uni.$u.route({
					url: "/pages_receive/record/index",
					params: {
						receiveId: receiveId,
						detailStatus: 0 //1：用户中心进去的  0：客户端领取记录进去的
					}
				})
			},
			toSearchList() {
				uni.navigateTo({
					url: "/pages_receive/search/index"
				})
			}
		}
	}
</script>

<style lang="scss">
	.receive {
		background: #ffffff;
		width: 100%;
		color: #333333;
	}

	.receives {
		padding: 36rpx 28rpx 0;
	}

	.receives_search {
		display: flex;
		justify-content: space-between;
		padding-left: 8rpx;
	}

	.receive_info {
		background: #ffffff;
		box-shadow: 0px 0px 16rpx 2rpx rgba(0, 0, 0, 0.12);
		border-radius: 12rpx;
		margin-top: 40rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.info_time {
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		align-items: center;
		padding: 0 24rpx;
	}

	.info_time_t {
		display: block;
	}

	.info_time_i {
		display: flex;
		color: #588bf3;
	}

	.receive_detail {
		border-top: 2rpx solid rgba(243, 243, 243, 0.7);
		padding: 26rpx 0 38rpx;
		display: flex;
		align-items: center;
	}

	.detail_img {
		width: 170rpx;
		height: 170rpx;
		border-radius: 8rpx;
		margin: 0 20rpx 0 16rpx;
	}

	.detail_t {
		display: block;
		width: 480rpx;
		font-size: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.detail_tt {
		margin-top: 18rpx;
		font-size: 26rpx;
		color: #666666;

		text {
			margin-right: 10rpx;
		}
	}

	.rec {
		margin-top: 300rpx;
		text-align: center;
		color: #b5b5b5;
	}

	.rec_img {
		width: 400rpx;
		height: 400rpx;
	}
</style>
